import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
import { asyncRoutes } from '@/router'
// 白名单
const white_list = ['/login', '/404']

// 前置导航守卫: 开启进度条
// 注意点：开启前置导航守卫后 需要立即添加next() 不然页面会变白 无法做测试
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  nprogress.start()
  // 获取token
  const token = store.getters.token
  // 判断是否有token ：有token
  if (token) {
    // 判断去的是否是登录页
    if (to.path === '/login') {
      // 由于next中有参数 所以不执行后置导致守卫 需要手动关闭进度条
      nprogress.done()
      // 跳转到主页
      next('/')
    } else {
      // 由于每次跳转页面都会经过这个地方 所以在此处获取用户基本信息
      if (!store.getters.userId) {
        // 根据员工已分配的权限，动态的筛选出该员工可以访问的路由，并挂载到router实例上
        // 从用户基本信息中结构出用户关联的路由
        const { roles } = await store.dispatch('user/getUserInfoAction')
        // 获取员工已分配的权限（员工详情获取已分配的角色，角色详情获取已分配的权限，用户基本信息可以拿到关联的权限）
        console.log(roles.menus)
        // 获取动态路由
        console.log(asyncRoutes)
        // 根据员工已分配的权限，动态的筛选出该员工可以访问的路由
        const filterRoutes = asyncRoutes.filter(item => roles.menus.includes(item.name))
        console.log(filterRoutes)
        store.commit('user/setRoutes', filterRoutes)
        // 将筛选出来的用户可以访问的路由 挂载到全局路由router实例上
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 已知vueRouter插件的缺陷：插件的作者没有设计好，所以需要手动中转一次跳转
        next(to.path)
      } else {
        next()
      }
    }
  } else {
    // 判断是否有token: 没有token的情况
    if (white_list.includes(to.path)) {
      next()
    } else {
      // 关闭进度条
      nprogress.done()
      next('/login')
    }
  }
})
// 后置导航守卫：关闭进度条
router.afterEach(() => {
  // 关闭进度条
  nprogress.done()
})
